<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title th:text="${product != null} ? ${product.name} : '商品详情'">商品详情</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .container { max-width: 1100px; margin: 0 auto; padding: 16px; }
        .img { width: 460px; height: 460px; object-fit: cover; border-radius: 8px; }
    </style>
</head>
<body>
<div id="app" class="container">
    <el-page-header @back="go('/')" content="商品详情"></el-page-header>

    <el-row :gutter="24" style="margin-top:16px;">
        <el-col :span="10">
            <el-card shadow="hover">
                <img class="img" th:src="${product.coverImg}" />
            </el-card>
        </el-col>
        <el-col :span="14">
            <el-card shadow="hover">
                <h2 th:text="${product.name}">商品名称</h2>
                <el-text type="info" th:text="${product.intro}">商品简介</el-text>
                <div style="margin-top:12px;">
                    <el-text tag="b" type="danger" size="large" th:text="'¥' + ${product.price}">¥0.00</el-text>
                </div>
                <div style="margin-top:16px;">
                    <el-input-number v-model="qty" :min="1"></el-input-number>
                    <el-button type="primary" style="margin-left:8px;" @click="onAdd">加入购物车</el-button>
                    <el-button @click="go('/cart')">去购物车</el-button>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>

<script>
const { createApp, ref } = Vue
createApp({
    setup(){
        const qty = ref(1)
        const onAdd = ()=>{
            const id = Number(document.body.getAttribute('data-gid') || 0)
        }
        const go = (p)=>{ window.location.href = p }
        return { qty, onAdd, go }
    },
    mounted(){
        const id = this.$el.querySelector('[th\\:text]')
        const dataId = document.querySelector('[th\\:onclick]')
        // 直接使用内联函数方式改为通过 DOM 读取隐藏字段
        const hidden = document.createElement('input')
        hidden.type = 'hidden'
        hidden.id = 'gid'
        hidden.value = this.$el.querySelector('h2').getAttribute('th:text') ? '' : ''
    },
    methods:{
        onAdd(){
            const idEl = document.querySelector('[th\\:onclick]')
            const dataset = idEl ? idEl.getAttribute('th:onclick') : ''
            const match = /\$\{p\.id\}|\$\{product\.id\}/.test(dataset)
            const id = document.querySelector('[th\\:onclick]') ? Number(document.querySelector('[th\\:onclick]').getAttribute('th:onclick').match(/\$\{product\.id\}/) ? 0 : 0) : 0
            const realId = Number(document.location.pathname.split('/').pop()) || id
            const cart = JSON.parse(localStorage.getItem('cart') || '{}')
            cart[realId] = (cart[realId] || 0) + Number(this.qty || 1)
            localStorage.setItem('cart', JSON.stringify(cart))
            ElementPlus.ElMessage.success('已加入购物车')
        }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>


